<template>
	<div >
		<Row style="background:#eee;padding:20px">
			<Col span="11">
			<Card :bordered="false" :style="{height:height+'px'}">
				<p slot="title">
					<Icon type="ios-film-outline"></Icon>
					组织架构 <div>新增</div>
					<div v-for="(t,i) in org">
						<div >
							&nbsp;{{t.org_name}} <div @click="add(t.id)">新增</div><div @click="del(t.id)">删除</div>
						</div>
				
						<div v-for="(tt,ii) in t.children">
							&nbsp;&nbsp;{{tt.org_name}} <div>删除</div>
						</div>
					</div>
					
				</p>

			</Card>
			</Col>
			<Col span="11" offset="2">
			<Card shadow :style="{height:height/2+'px'}">
				<p slot="title">
					<Icon type="ios-film-outline"></Icon>
					组织详情
				</p>
				<lform :model="model" :schema="schema"></lform>
			</Card>
			<Card shadow :style="{height:height/2+'px'}">
				<p slot="title">
					<Icon type="ios-film-outline"></Icon>
					组织人员
				</p>
				<llist></llist>
			</Card>
			</Col>
		</Row>
		 <Modal
        v-model="modal1"
        title="Common Modal dialog box title"
        @on-ok="ok"
        @on-cancel="cancel">
        <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
    </Modal>
	</div>
</template>

<script>
	import lform from './../../public/form.vue';
	import llist from './../../public/list.vue';
	import util from '@/libs/util';
	export default {
		data() {
			return {
				height: window.innerHeight,
				modal1:false,
				add:{
					id:"",
					name:""
				},
				org: {},
				model: {
					id: 1,
					name: '',
					date: '1992-06-04',
					password: 'lbb123',
					status: true,
					skills: 'qianduan',
					type: 'manong'
				},
				event: {
					submit() {}
				},
				schema: {
					fields: [{
							type: 'input',
							inputType: 'text',
							props: {},
							col: 12,
							label: 'ID (disabled text field)',
							model: 'id',
							readonly: true,
							disabled: true,
							rules: [{
								required: true,
								message: 'The name cannot be empty',
								trigger: 'blur'
							}]
						},
						{
							col: 12,
							type: 'datepicker',
							props: {},
							label: '时间',
							model: 'date'
						},
						{
							type: 'input',
							inputType: 'text',
							label: 'Name',
							model: 'name',
							placeholder: 'Your name',
							featured: true,
							required: true,
							rules: [{
								required: true,
								message: 'The name cannot be empty',
								trigger: 'blur'
							}]
						},
						{
							type: 'input',
							inputType: 'password',
							label: 'Password',
							model: 'password',
							min: 6,
							required: true,
							hint: 'Minimum 6 characters'
						},
						{
							type: 'select',
							label: 'Skills',
							model: 'skills',
							values: [{
									name: 'qianduan',
									value: 'qianduan'
								},
								{
									name: 'houduan',
									value: 'houduan'
								}
							]
						},
						{
							type: 'input',
							inputType: 'email',
							label: 'E-mail',
							model: 'email',
							placeholder: "User's e-mail address",
							rules: [{
								required: true,
								message: 'The name cannot be empty',
								trigger: 'blur'
							}]
						},
						{
							type: 'checkbox',
							label: 'Status',
							model: 'status',
							default: true
						}
					]
				}
			}
		},
		methods: {
			findDetail(id){
				
			},
			findPeople(id){
				
			},
			add(id){
				
			},
			del(id){
				
			},
			ok(){
				
			},
			cancel(){
				
			}
		},
		components: {
			lform,
			llist
		},
		mounted() {
			console.log(123)
			this.$ajax({
				url: "/org/getOrgTree",
				method: "get",
				data: {}
			}).then((d) => {
				console.log(d)
				this.org=d.data;
				console.log(123)
				console.log(this.org,d)
			})
		}
	}
</script>

<style>

</style>